<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			[class^="box"] {
				border: 20px solid aqua;
				
			}
			[class^="box"]:hover {
				transform: rotate(144000deg);
				transition: all 60s;
			}
			.box1 {
				margin: 100px;
				height: 420px;
				width: 420px;
				border-color: aqua;
			}
			.box2 {
				width: 380px;
				height: 380px;
				border-color: red;
			}

			.box3 {
				width: 340px;
				height: 340px;
				border-color: darkorange;
			}

			.box4 {
				width: 300px;
				height: 300px;
				border-color: yellow;
			
			}

			.box5 {
				width: 260px;
				height: 260px;
				border-color: greenyellow;
	
			}

			.box6 {
				width: 220px;
				height: 220px;
				border-color: lightskyblue;
			}
			.box7 {
				width: 180px;
				height: 180px;
				border-color: darkviolet;
			}
			.box8 {
				width: 140px;
				height: 140px;
				border-color: forestgreen;
			}
			.box9 {
				width: 100px;
				height: 100px;
				border-color: coral;
			}
			.box10 {
				width: 60px;
				height: 60px;
				border-color: greenyellow;
				color: khaki;
			}
			.box11 {
				width: 20px;
				height: 20px;
				border-color: pink;
			}
	
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">
					<div class="box4">
						<div class="box5">
							<div class="box6">
								<div class="box7">
									<div class="box8">
										<div class="box9">
											<div class="box10">
												<div class="box11">
													
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
